<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" errorPage="error/errorpage.jsp"%>
<%@ page language="Java"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- VALIDADO!! :-D -->

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    
     <link rel="stylesheet" href="estilos/style.css" type="text/css" media="screen" charset="utf-8"/>
	<script src ="ajax/scriptaculous-js-1.8.1/lib/prototype.js"  type="text/javascript" charset="utf-8"></script>
	<script src ="ajax/scriptaculous-js-1.8.1/src/effects.js" type="text/javascript" charset="utf-8"></script>
	<script src="ajax/ajax_utils.js" type="text/javascript" charset="utf-8"></script>
	<script src="ajax/ajax_login.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/menu.js" type="text/javascript" charset="utf-8"></script>

	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAW6ZkayH6hhgMyC2y6LQx8xTlOAjHTmgj9z0QOzdQFV7VnifGuxSJsOzr3eQromRGXbLCHJKjeEnNNw" type="text/javascript">
   </script>
	<script src="js/googlemaps.js" type="text/javascript" charset="utf-8"></script>
	<script src="ajax/ajax_utils.js" type="text/javascript" charset="utf-8"></script>
	<script src="ajax/ajax_login.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/menu.js" type="text/javascript" charset="utf-8"></script>
	<title>Erasmus Help! - Callejero</title>
	<!--[if IE]> <link href="estilos/style_ie.css" rel="stylesheet" type="text/css"> <![endif]-->
	
  </head>
  <%
	String id = session.getId();
	String usuario = (String) session.getAttribute("usuario");
  %>
	<body onload="inicializa();ocultaSubMenu()" onunload="GUnload()">
	<jsp:include page="hidden.jsp"/>
	<div id='page_wrapper'>
	
	<jsp:include page="cabecera.jsp"/>
	
	<% if(usuario == null) { %>
		<jsp:include page="menu.jsp"/>
	<% } else { %>
		<jsp:include page="menu_user.jsp"/>
	<% } %>
	
	<div id='content_wrapper'>
	
	<div class='spacer'></div> 
	
	<div id='contenido'>
		<div id="contenedorServicioCallejero">
		
			<div id="busqsimple">
				<fieldset>
				<legend>Buscar en callejero</legend>
				<div class='spacer'></div>
					<form action="#" onsubmit="showAddress(this.direccion.value); return false" style="height:105px">
						<div style="padding-bottom: 14%;">
							<input type="text" id="direccion" name="direccion" size="40" 
								title="Introduce lugar o direccion a buscar"/>
							<p>Ejemplo: lugar o direccion, ciudad</p>
						</div>
					
						<div style="float: right">
							<input type="reset" value="Reset" class="mybtn" title="Borrar campos"
								onmouseover="goLite(this)" onmouseout="goDim(this)"/>
							<input class="mybtn" type="submit" value="Buscar!" title="Haz click para buscar"
								onmouseover="goLite(this)" onmouseout="goDim(this)"/>
						</div>
					</form>
				</fieldset>	
			</div>
					
			<div id="busqruta">
				<fieldset>
				<legend>C&oacute;mo llegar a</legend>
					<form action="#" onsubmit="setDirections(this.desde.value, this.hasta.value, this.locale.value); return false" style="height:105px">
					<div class='spacer'></div>
					<div>
						<div style="float:left width:60%">
							<div class="formruta">
								<label for="desde">Desde&nbsp;</label>
								<input type="text" id="desde" name="desde" size = "25"/>
							</div>
							<div class="formruta">
								<label for="hasta">Hasta</label>
								<input type="text" id="hasta" name="hasta" size = "25"/>
							</div>
						</div>	
		
						<div>
							<select id="locale" name="locale">
								<option value="es" selected="selected">Espa&ntilde;ol</option>
								<option value="en">Ingl&eacute;s</option>
								<option value="fr">Franc&eacute;s</option>
								<option value="de">Alem&aacute;n</option>
								<option value="ja">Japon&eacute;s</option>			    
							</select>		
						</div>
					</div>
					<div class='spacer'></div> <div class='spacer'></div> <div class='spacer'></div>
						<div style="float: right; padding-top:5%;">
							<input type="reset" value="Reset" class="mybtn" 
							onmouseover="goLite(this)" onmouseout="goDim(this)" title="Borrar campos"/>
							<input type="submit" value="Guiame!" class="mybtn"
							onmouseover="goLite(this)" onmouseout="goDim(this)" title="Reiniciar valores"/>
						</div>
					</form>
					
				</fieldset>
			</div>
	</div>
	<div class='spacer' style="padding-top: 40px;"></div>
	<div style="clear:both;padding-top: 20px">
		<table>
			<tr>
				<td class= "centrado"><h4>Mapa</h4></td>
				<td class= "centrado"><h4>Ruta a seguir</h4></td>
			</tr>
			<tr>
				<td valign="top"><div id="map" style="width: 430px; height: 495px"></div></td>
				<td valign="top"><div id="directions" style="width: 275px"></div></td>
			</tr>
		</table>
	</div>
	</div>
	
	<div class='spacer'></div>
	
	</div>
	
	<jsp:include page="pie.html"/>
	
	</div>
	
	</body>
	
	</html>
	